<template>
  <div class="home">
    <div class="map" id="map"></div>
    <div class="info" id="info"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileDebug from 'ol/source/TileDebug';
import ZoomSlider from 'ol/control/ZoomSlider';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import VectorSource from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';

import { Tile as LayerTile, Vector as VectorLayer } from 'ol/layer';
import { DragRotateAndZoom, defaults as defaultInteractions } from 'ol/interaction';
import { OverviewMap, defaults as defaultControls } from 'ol/control';
import { Icon, Style, Circle as CircleStyle, Fill, Stroke } from 'ol/style';
import { fromLonLat } from 'ol/proj';

export default {
  name: 'Home',
  components: {},
  data: () => ({
    map: null,
    markers: [],
    source: new VectorSource({ wrapX: false }),
    markerPoint: new Icon({
      color: '#09f',
      crossOrigin: 'anonymous',
      src: require('@/assets/marker.png'),
    }),
  }),
  mounted() {
    this.map = this.initMap();

    this.createPointerInMap();
    this.map.on('click', ($evt) => {
      // 当前点击座标点
      console.log($evt.coordinate);
      // 绘制点线面
      this.createPointerInMap();
    });
    //
    this.setMouseToPointer();
  },
  methods: {
    // 初始化地图
    initMap() {
      return new Map({
        // 地图挂载元素点
        target: 'map',
        // 地图数据来源
        layers: this.createMapSource(),
        // 中心和视图放大倍数
        view: new View({
          center: [11439116.97, 2872492.8],
          zoom: 6,
        }),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
        controls: defaultControls().extend([new ZoomSlider(), this.createOverviewMapControl()]),
      });
    },
    // 创建覆盖control
    createOverviewMapControl() {
      return new OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [
          new LayerTile({
            source: new OSM(),
          }),
        ],
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: false,
      });
    },
    createMarker(point) {
      return new Feature({
        geometry: new Point(point),
      });
    },
    createPointerInMap() {
      const draw = new Draw({
        source: this.source,
        type: 'Point',
      });
      this.map.addInteraction(draw);
    },
    setMouseToPointer() {
      // 当鼠标到达marker的时候变成小手状态
      this.map.on('pointermove', (evt) => {
        this.map.getTargetElement().style.cursor = this.map.hasFeatureAtPixel(evt.pixel)
          ? 'pointer'
          : '';
      });
    },
    createMapSource() {
      const marker = this.createMarker([11439116.97, 2872492.8]);
      marker.setStyle(
        new Style({
          image: this.markerPoint,
        }),
      );
      return [
        new LayerTile({
          source: new OSM(),
        }),
        new VectorLayer({
          source: this.source,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 2,
            }),
            image: this.markerPoint,
          }),
        }),

        // debug
        // new LayerTile({
        //   source: new TileDebug(),
        // }),
        new VectorLayer({
          source: new VectorSource({
            features: [marker],
          }),
        }),
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.map {
  height: calc(100vh - 247px);
  width: 100%;
  & /deep/ .ol-overviewmap {
    bottom: auto;
    left: auto;
    right: 10px;
    top: 10px;
  }
  & /deep/ .ol-custom-overviewmap:not(.ol-collapsed) {
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  & /deep/ .ol-custom-overviewmap .ol-overviewmap-map {
    border: none;
    width: 300px;
  }
  & /deep/ .ol-custom-overviewmap .ol-overviewmap-box {
    border: 1px solid red;
    border-radius: 4px;
  }
  & /deep/ .ol-custom-overviewmap:not(.ol-collapsed) button {
    bottom: auto;
    left: auto;
    right: 1px;
    top: 1px;
  }
  & /deep/ .ol-rotate {
    top: 170px;
    right: 0;
  }
}
</style>
